<template>
  <el-form :inline="true" size="large">
      <el-form-item label="分类名称">
          <el-input v-model="formData.className" placeholder="请输入分类名称" clearable @clear="refreshPage" style="width: 250px;"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="getAllComm">搜索</el-button>
          <el-button type="primary" @click="adddate">新增分类</el-button>
          <el-button type="danger" @click="removeBatch">批量删除</el-button>
      </el-form-item>
  </el-form>
  <el-form>
      <el-table :data="visitList" border class="my-table" size="large" @selection-change="handleSelectionChange">
          <el-table-column type="selection" :selectable="selectable" width="55" />
          <el-table-column prop="id" label="ID" align="center"></el-table-column>
          <el-table-column prop="className" label="分类名称" align="center"></el-table-column>
          <el-table-column prop="classImg" label="缩略图" align="center">
            <template v-slot="scope">
                <img :src="`http://localhost:8081/sfzy${scope.row.classImg}`" alt="缩略图" class="table-img">
            </template>
        </el-table-column>
          <el-table-column prop="del" label="状态" align="center">
              <template v-slot="scope">  
                  <span :class="{c1:scope.row.del==0,c2:scope.row.del==1}">{{ scope.row.del == 0 ? '正常' : '删除' }}</span>  
              </template> 
          </el-table-column>
          <el-table-column label="操作" align="center">
              <template v-slot="scope">
                  <el-link type="primary" @click="updata(scope.row)">修改</el-link>
                  <el-link type="danger" @click="handleDownshelf(scope.row)">删除</el-link>
              </template>
          </el-table-column>
      </el-table>
  </el-form>
  <el-dialog v-model="dialogFormVisible" :title="title" width="525" @close="cancel">
      <el-form :model="adddate" class="form1">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input v-model="visitData.className" autocomplete="off" />
          </el-form-item>
          <el-form-item label="缩略图" :label-width="formLabelWidth">
            <el-upload drag class="avatar-uploader" method="post" action="http://localhost:8081/sfzy/upload" :show-file-list="false"
				:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
				<img v-if="form.imgUrl" :src="`${form.imgUrl}`" class="avatar" />
				<div v-else>
					<el-icon class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</div>
			</el-upload>
          </el-form-item>
      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="handleSubmit">确定</el-button>
          </div>
      </template>
</el-dialog>
<el-row>
    <el-pagination
      :page-sizes="[5, 10, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      :default-page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="pageNumChange"
    />
  </el-row>
</template>

<script setup>
//获取城市内容
import citydata from '@/assets/citydata';
//icon图标
import { Search,Refresh,Edit,CloseBold,Plus,Share,ArrowRight  } from '@element-plus/icons-vue'
//信息提示
import { ElForm, ElMessage, ElMessageBox, uploadProps } from 'element-plus';
//getCurrentInstance获取全局对象，用于获取axios属性
//onMounted页面加载后开始挂载执行
//watchEffect属性监听器，daterange响应后开始执行函数，这里用于获取开始时间和结束时间
import { getCurrentInstance, onMounted, ref, watchEffect,onBeforeUnmount } from 'vue';
//接收全局对象
const CurrentInstance=getCurrentInstance()
//初始化添加弹框，使其不显示
const dialogFormVisible = ref(false)
//添加弹出框左边距
const formLabelWidth = '140px'
//获取全局对象挂载的naxios赋值给$http来代替naxios
const {$http}=CurrentInstance.appContext.config.globalProperties
//弹出框的标题
const title=ref("")
//代表active样式
const i=ref("")
//默认动态页码为0
const total=ref(0)
//动态方法，默认弹出框为add
const operationType = ref('add');
let form = ref({
		imgUrl: ''
	})
const imageUrl = ref('')
	// 图片上传成功的钩子  
const handleAvatarSuccess = (response, uploadFile) => {  
    // 保存相对路径到相关数据对象，以便传给后端
    const relativeImagePath = response.data;
    // 拼接完整的图片路径在弹出框中显示
    const fullImagePath = `http://localhost:8081/sfzy${response.data}`;
    imageUrl.value = URL.createObjectURL(uploadFile.raw);  
    form.value.imgUrl=fullImagePath
    
    //传回数据库的路径
    visitData.value.classImg = relativeImagePath;
};

onBeforeUnmount(() => {  
    URL.revokeObjectURL(imageUrl.value);  
});
//上传图片组件->上传图片之前触发的钩子函数
const beforeAvatarUpload = (rawFile) => {
    const allowedFormats = ['image/jpeg', 'image/png']; // 允许的文件格式
        if (!allowedFormats.includes(rawFile.type)) {
            this.$message.error('文件格式必须是 JPG 或 PNG！');
            return false;
        }
        else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
//定义formData来接收访问地址的数据
const formData =ref({
  className:"",
  pageNum:1 ,// 页码
  pageSize:5, // 每页展示条数
  ids:[]//多选id
})
//定义的表格数据来存放访问地址中的数据
let visitList=ref([
  
])
let visitData=ref({
  id:"",
  className:"",
  classImg:"",
  del:""
})
//监听函数，if else是为了防止访问空时报错，同时获取页面的开始时间和结束时间
watchEffect(function(){
  
})
//点击搜索的清除组件，刷新页面
function refreshPage() {
    getAllComm();
}
//生命周期中挂载到页面加载之后开始执行
onMounted(()=>{
  getAllComm()
})
//获取点击的分页页码并执行搜索功能
function pageNumChange(num){
    formData.value.pageNum=num;
    getAllComm()
}
function handleSizeChange(size){
    formData.value.pageSize=size;
    getAllComm()
}
//搜索功能，将formData的定义初始属性传给访问地址，并传回来地址中的表格数据和各个属性
function getAllComm(){
  $http({
      method:"get",
      url:"http://localhost:8081/sfzy/courseClass/page",
      params:formData.value
  }).then(res=>{ 
      visitList.value=res.data.data.list;//获取访问地址中的列表数据传给visitList
      total.value=res.data.data.total;
  })
}
// 新增分类函数
function addNewCategory() {
    $http({
        method: "post",
        url: "http://localhost:8081/sfzy/courseClass",
        data: visitData.value
    }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success("添加成功！");
        } else {
            ElMessage.error("添加失败");
        }
        dialogFormVisible.value = false;
        getAllComm();
        cancel();
    });
}
// 使添加框显示（新增分类）
function adddate() {
    dialogFormVisible.value = true;
    title.value = "新增分类";
    operationType.value ='add';
    // 初始化相关数据（可根据实际需求补充更多初始化操作）
    visitData.value = {
        id: "",
        className: "",
        classImg: "",
        del: 0
    };
}
// 修改分类函数
function updateCategory(val) {
    $http({
        method: "put",
        url: "http://localhost:8081/sfzy/courseClass",
        data: val
    }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success("修改成功！");
        } else {
            ElMessage.error("修改失败");
        }
        
        dialogFormVisible.value = false;
        getAllComm();
        cancel();
    });
}
// 点击修改链接弹出修改框并执行修改操作
function updata(val) {
    dialogFormVisible.value = true;
    title.value = "修改分类";
    visitData.value = val;
    operationType.value ='modify';
    form.value.imgUrl=`http://localhost:8081/sfzy${val.classImg}` 
}
// 统一提交函数，根据操作类型调用相应函数
function handleSubmit() {
    if (operationType.value === 'add') {
        addNewCategory();
    } else if (operationType.value ==='modify') {
        updateCategory(visitData.value);
    }
}
//删除功能
function handleDownshelf(val){
    if (formData.value.ids.length > 0) {
        ElMessage({
            type: 'warning',
            message: '已选择了多行，请使用批量删除功能进行操作！',
        });
        return;
    }
    ElMessageBox.confirm(
    '是否确认删除小区数据?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const { id } = val;
      $http({
          method:"delete",
          url:`http://localhost:8081/sfzy/courseClass/${id}`,
          data:{}
      }).then(res=>{
          if (res.data.code === 200) {  
              ElMessage.success("删除成功！");  
          } else {  
              ElMessage.error("删除失败");  
          }  
          getAllComm(); 
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除操作',
      })
    })
}
//批量删除
const selectable = (row) => ![].includes(row.id)
const handleSelectionChange = (val) => {
  formData.value.ids = val.map(item => item.id);
}
function removeBatch(){
    ElMessageBox.confirm(
    '是否确认删除小区数据?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const idsArray  = formData.value.ids;
      // 将数组idsArray中的元素拼接成字符串形式，用逗号分隔
      const idsStr = idsArray.join(',');
      
      $http({
          method:"delete",
          url:`http://localhost:8081/sfzy/courseClass?ids=${idsStr}`,
          data:{}
      }).then(res=>{
          if (res.data.code === 200) {  
              ElMessage.success("删除成功！");  
              // 判断当前页是否还有数据，如果没有则将页码减1
                if (visitList.value.length === 0 && formData.value.pageNum > 1) {
                    formData.value.pageNum--;
                }
                // 清理ids参数
                formData.value.ids = [];
          } else {  
              ElMessage.error("删除失败");  
          }  
          getAllComm(); 
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除操作',
      })
    })
}
//重置添加输入框内容
function cancel(){
  dialogFormVisible.value = false;
  imageUrl.value=""
  form.value={
    imgUrl:''
  }
  visitData.value = {
      id:"",
      className:"",
      classImg:"",
      del:0
  }
  getAllComm()
}

</script>
  
<style scoped>
  .demo-form-inline .el-input {--el-input-width: 220px;}
  .demo-form-inline .el-select {--el-select-width: 220px;}
  .el-link {padding: 0 5px;}
  .el-form{width: 1420px;}
  .el-input{width: 300px;}
  .form1{width: 100%;}
  .el-pagination{margin-top: 25px;}
  .coordinates{margin-left: 10px;}
  .my-table :deep(th){background-color: #1890ff;color: #ffffff;text-align: center;}
  .mendian{margin-bottom: 15px;}
  .active{color: green;}
  .avatar{
      width: 250px;
      height: 220px;
      display: block;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 250px;
      height: 178px;
      text-align: center;
  }
  .c1{color: #1890ff;cursor: pointer;}
  .c2{color: red;cursor: pointer;}
  .table-img {
    width: 100px; /* 根据需要调整图片宽度 */
    height: 100px; /* 根据需要调整图片高度 */
    object-fit: cover; /* 控制图片如何填充容器，cover会保持图片比例并填满容器 */
}
</style>